<template>
    <div id="map">
        <div class="MapTool">
            <el-row>
                <el-button type="primary" @click="zoomOut">缩小</el-button>
                <el-button type="success" @click="zoomIn">放大</el-button>
                <el-button type="info" @click="translate">平移</el-button>
                <el-button type="warning" @click="rotate">旋转</el-button>
                <el-button type="danger" @click="reset">复位</el-button>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {Map, View} from 'ol'
    import OSM from 'ol/source/OSM'
    import TileLayer from 'ol/layer/Tile'
    import {defaults as defaultControls} from 'ol/control.js';
    import {fromLonLat} from 'ol/proj';

    export default {
        name: "BaseOperation",
        data() {
            return {
                map: null,
                zoom: null,
                center: null,
                rotation: null,
            }
        },
        mounted() {
            this.map = new Map({
                target: 'map',
                layers: [
                    new TileLayer({
                        source: new OSM()
                    })
                ],
                view: new View({
                    center: [113.24981689453125, 23.126468438108688], //视图中心位置,
                    projection: "EPSG:4326",
                    zoom: 12
                })
            })
            var view = this.map.getView();
            this.zoom = view.getZoom();
            this.center = view.getCenter();
            this.rotation = view.getRotation();
        },
        methods: {
            zoomOut() {
                let view = this.map.getView();
                let zoom = view.getZoom();
                view.setZoom(zoom-1);
            },
            zoomIn() {
                let view = this.map.getView();
                let zoom = view.getZoom();
                view.setZoom(zoom+1);
            },
            translate() {
                let view = this.map.getView();
                //使用proj转换经纬度的坐标为平面坐标
                //let lonLat = fromLonLat([116.36444091796875, 39.91184298474967],'EPSG:4326');
                //console.log(lonLat)
                //设置当前视图的中心位置与缩放级别
                view.setCenter([116.36444091796875, 39.91184298474967])
                view.setZoom(12);
            },
            rotate() {
                let view = this.map.getView();
                let rotation = view.getRotation();
                //设置当前视图旋转的度数，度数是弧度制
                view.setRotation(rotation+Math.PI/3);
            },
            reset() {
                let view = this.map.getView();
                view.setZoom(this.zoom);
                view.setRotation(this.rotation);
                view.setCenter(this.center);
            }

        }
    }
</script>

<style scoped>
    .MapTool {
        position: absolute;
        right: 50px;
        top: 50px;
        z-index: 9999;
    }
</style>